<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>终端模拟器</title>
    <!-- 引入LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.min.css">
    <style>
        body {
            background-color: #1E1E1E;
            color: #CCC;
            font-family: 'Courier New', monospace;
            overflow: hidden;
        }
        .terminal-container {
            width: 100%;
            height: 100vh;
            padding: 20px;
            box-sizing: border-box;
        }
        .terminal-header {
            background-color: #323233;
            height: 30px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            display: flex;
            align-items: center;
            padding: 0 15px;
        }
        .terminal-window {
            background-color: #1E1E1E;
            border-radius: 6px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            height: calc(100% - 40px);
            overflow: hidden;
        }
        .terminal-body {
            height: calc(100% - 30px);
            padding: 15px;
            overflow-y: auto;
        }
        .terminal-prompt {
            color: #5AD5D5;
            font-weight: bold;
        }
        .terminal-input-line {
            display: flex;
            align-items: center;
        }
        .terminal-input {
            background: transparent;
            border: none;
            color: #FFF;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            outline: none;
            flex: 1;
            padding: 0 5px;
        }
        .terminal-output {
            margin-bottom: 10px;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        .red-dot {
            width: 12px;
            height: 12px;
            background-color: #FF5F57;
            border-radius: 50%;
            margin-right: 8px;
        }
        .yellow-dot {
            width: 12px;
            height: 12px;
            background-color: #FFBD2E;
            border-radius: 50%;
            margin-right: 8px;
        }
        .green-dot {
            width: 12px;
            height: 12px;
            background-color: #28CA42;
            border-radius: 50%;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="terminal-container">
        <div class="terminal-window">
            <div class="terminal-header">
                <div class="red-dot"></div>
                <div class="yellow-dot"></div>
                <div class="green-dot"></div>
                <span style="color: #999; font-size: 14px;">bash</span>
            </div>
            <div class="terminal-body" id="terminalBody">
                <div class="terminal-output">欢迎使用终端模拟器 v1.0</div>
                <div class="terminal-output">输入 'help' 查看可用命令</div>
                <div class="terminal-output"></div>
            </div>
        </div>
    </div>

    <!-- 引入LayUI和SocketIO -->
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.min.js"></script>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    
    <script>
        class Terminal {
            constructor() {
                this.history = [];
                this.historyIndex = -1;
                this.currentInput = '';
                this.socket = null; // SocketIO连接对象
                this.isConnected = false;
                
                this.init();
            }
            
            // 初始化终端
            init() {
                this.terminalBody = document.getElementById('terminalBody');
                this.renderInputLine();
                this.focusInput();
                this.setupEventListeners();
                
                // 初始化SocketIO连接 - 预留位置
                // this.initSocket();
            }
            
            // 初始化SocketIO连接 - 预留位置
            initSocket() {
                /*
                实际实现示例:
                this.socket = io('http://localhost:5000');
                
                this.socket.on('connect', () => {
                    this.isConnected = true;
                    this.printOutput('已连接到服务器');
                });
                
                this.socket.on('disconnect', () => {
                    this.isConnected = false;
                    this.printOutput('与服务器的连接已断开');
                });
                
                this.socket.on('command_result', (data) => {
                    this.printOutput(data.result);
                    this.renderInputLine();
                });
                */
                
                // 模拟连接成功
                setTimeout(() => {
                    this.isConnected = true;
                    this.printOutput('已连接到服务器 (模拟)');
                }, 500);
            }
            
            // 设置事件监听
            setupEventListeners() {
                document.addEventListener('click', () => {
                    this.focusInput();
                });
                
                document.addEventListener('keydown', (e) => {
                    this.handleKeyDown(e);
                });
            }
            
            // 处理按键事件
            handleKeyDown(e) {
                const input = document.getElementById('terminalInput');
                
                if (e.key === 'Enter') {
                    this.executeCommand(input.value);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    this.navigateHistory('up');
                } else if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    this.navigateHistory('down');
                } else if (e.key === 'Tab') {
                    e.preventDefault();
                    // 预留Tab补全功能
                }
            }
            
            // 执行命令
            executeCommand(command) {
                // if (!command.trim()) {
                //     this.renderInputLine();
                //     return;
                // }
                
                // 显示输入的命令
                this.printOutput(this.getPrompt() + command);
                
                // 添加到历史记录
                this.history.push(command);
                this.historyIndex = this.history.length;
                
                // 处理特殊命令
                if (command === 'clear' || command === 'cls') {
                    this.clearTerminal();
                    this.renderInputLine();
                    return;
                }
                
                // 发送命令到后端 - 预留位置
                this.sendCommandToBackend(command);
            }
            
            // 发送命令到后端 - 预留位置
            sendCommandToBackend(command) {
                /*
                实际实现示例:
                if (this.isConnected) {
                    this.socket.emit('execute_command', { command: command });
                } else {
                    this.printOutput('错误: 未连接到服务器');
                    this.renderInputLine();
                }
                */
                
                // 模拟后端响应
                setTimeout(() => {
                    this.printOutput(`命令已发送: ${command} (模拟后端响应)`);
                    this.renderInputLine();
                }, 300);
            }
            
            // 在历史记录中导航
            navigateHistory(direction) {
                if (this.history.length === 0) return;
                
                if (direction === 'up') {
                    if (this.historyIndex > 0) {
                        this.historyIndex--;
                    }
                } else {
                    if (this.historyIndex < this.history.length - 1) {
                        this.historyIndex++;
                    } else {
                        this.historyIndex = this.history.length;
                        document.getElementById('terminalInput').value = this.currentInput;
                        return;
                    }
                }
                
                document.getElementById('terminalInput').value = this.history[this.historyIndex];
            }
            
            // 获取提示符
            getPrompt() {
                return '<span class="terminal-prompt">user@terminal:~$ </span>';
            }
            
            // 渲染输入行
            renderInputLine() {
                // 移除现有的输入行
                const existingInputLine = document.getElementById('terminalInputLine');
                if (existingInputLine) {
                    existingInputLine.remove();
                }
                
                // 创建新的输入行
                const inputLine = document.createElement('div');
                inputLine.id = 'terminalInputLine';
                inputLine.className = 'terminal-input-line';
                inputLine.innerHTML = `
                    ${this.getPrompt()}
                    <input type="text" id="terminalInput" class="terminal-input" autocomplete="off">
                `;
                
                this.terminalBody.appendChild(inputLine);
                this.focusInput();
                
                // 保存当前输入内容
                const input = document.getElementById('terminalInput');
                input.addEventListener('input', () => {
                    this.currentInput = input.value;
                });
                
                // 滚动到底部
                this.scrollToBottom();
            }
            
            // 输出内容到终端
            printOutput(content) {
                const output = document.createElement('div');
                output.className = 'terminal-output';
                output.innerHTML = content;
                
                // 在输入行之前插入输出
                const inputLine = document.getElementById('terminalInputLine');
                if (inputLine) {
                    this.terminalBody.insertBefore(output, inputLine);
                } else {
                    this.terminalBody.appendChild(output);
                }
                
                this.scrollToBottom();
            }
            
            // 清空终端
            clearTerminal() {
                while (this.terminalBody.firstChild) {
                    this.terminalBody.removeChild(this.terminalBody.firstChild);
                }
            }
            
            // 聚焦到输入框
            focusInput() {
                const input = document.getElementById('terminalInput');
                if (input) {
                    input.focus();
                }
            }
            
            // 滚动到底部
            scrollToBottom() {
                this.terminalBody.scrollTop = this.terminalBody.scrollHeight;
            }
        }
        
        // 页面加载完成后初始化终端
        document.addEventListener('DOMContentLoaded', () => {
            window.terminal = new Terminal();
        });
    </script>
</body>
</html>